import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 2.15
import MyUtils 1.0
import 'component/search'
import '../component'

ColumnLayout {
	
	HttpUtils {
		id: http
	}
	property int limit: 60
	
	function searchMusicList(offset = 0,current = 0) {
		let keywords = searchInput.text
		if (!keywords || keywords.length <= 0) return
		
		function onReply(reply) {
			// console.log(reply)
			const musicReply = JSON.parse(reply);
			// console.log(musicReply)
			musicListView.current = current
			musicListView.count = musicReply['result'].songCount
			musicListView.musicList = musicReply['result']['songs'].map(
					item => {
					return {
						id: item.id,
						name: item.name,
						artists: item.artists[0].name,
						album: item.album.name
					}
				}
			)
			http.onReplySignal.disconnect(onReply)
		}
		
		http.onReplySignal.connect(onReply)
		http.connect('search?keywords=' + keywords + '&offset=' + offset + '&limit=' + limit)
	}
	
	Rectangle {
		Layout.fillWidth: true
		width: parent.width
		height: 60
		color: Qt.color('#00000000')
		Text {
			text: qsTr('搜索')
			x: 10
			verticalAlignment: Text.AlignBottom
			font.family: window.fontFamily
			font.pointSize: 25
		}
	}
	RowLayout {
		Layout.fillWidth: true
		TextField {
			id: searchInput
			font.family: window.fontFamily
			font.pointSize: 14
			selectByMouse: true
			selectionColor: Qt.color('#999999')
			color: Qt.color('#000000')
			placeholderText: '请输入关键词'
			background: Rectangle {
				color: Qt.color('#00000000')
				opacity: 0.5
				implicitWidth: 400
				implicitHeight: 30
			}
			focus: true
			Keys.onPressed: (event) => {
				if (event.key === Qt.Key_Enter || event.key === Qt.Key_Return)
					searchMusicList()
			}
		}
		MusicIconButton {
			source: '/resources/icon/search'
			toolTip: '搜索'
			onClicked: searchMusicList()
		}
	}
	MusicListView {
		id: musicListView
		Layout.topMargin:10
		onLoadPageMusic:(offset,current) => searchMusicList(offset,current)
	}
	
}